<template>
	<div
		class="card"
		@click="goto(props.value)"
		v-if="Object.getOwnPropertyNames(props.value)?.length"
	>
		<div class="card-top">
			<div class="UATit">
				<div>{{ props.value.process_type || props.value.process_name }}</div>
				<div v-if="!props.drafts">
					{{ props.value.subject }}
				</div>
				<div v-if="!props.close && !props.drafts">
					{{ props.value.node_name }}
				</div>
			</div>
			<div
				class="UA"
				style="background: #f2f4f7; color: #bbbfc4"
				v-if="props.close && !props.drafts && props.value.status === 'COMPLETE'"
			>
				{{ $t('approval.Completed',  '已结束') }}
			</div>
			<div
				class="UA"
				style="background: #fff0ef; color: #ff6459"
				v-else-if="
					props.close && !props.drafts && props.value.status === 'TERMINATION'
				"
			>
				{{ $t('approval.Terminated',  '已终止') }}
			</div>
			<div
				class="UA"
				style="background: #f2f4f7; color: #bbbfc4"
				v-else-if="props.drafts"
			>
				{{ $t('pages.task.drafts', '草稿箱') }}
			</div>
			<div class="UA" v-else>{{ $t('pages.process.select.approval', '审批中') }}</div>
		</div>
		<div class="card-bottom">
			<div v-if="!props.close && !props.drafts" class="ok-person-group-div">
				<ok-person-group
					.personList="props.value.task_assignee_list"
					width="30px"
					height="30px"
					placement="right"
					.show-all="true"
				></ok-person-group>
			</div>
			<i
				class="low-code iconshanchu1"
				v-else-if="props.drafts"
				@click.stop="draftsDelete(props.value.draft_id)"
			></i>
			<div v-else></div>
			<div class="time" v-if="!props.drafts">
				{{ formatTime(props.value.start_time, 'M-D h:m') }}
				{{ $t('approval.Launch',  '发起') }}
			</div>
			<div v-else>
				{{ props.value.update_time }} {{ $t('approval.Save',  '保存')  }}
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { formatTime } from '@/utils/time'
import { sourceType } from '@/constant/enums/processCenter'
import { client, path } from '@/utils'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
const emit = defineEmits(['draftsDelete'])
const props = defineProps({
	close: {
		type: Boolean,
	},
	drafts: {
		type: Boolean,
	},
	value: {
		type: Object,
	},
})
const draftsDelete = (draft_id: string) => {
	emit('draftsDelete', draft_id)
}
const goto = (date: any) => {
	sessionStorage.setItem('returnPathName', 'my_approval')
	if (!props.drafts) {
		window.location.href = date.relative_url
	} else {
		let openUrl = path.getFullPath(
			`/apps/desktop/sapp/${date?.app_id}/sappId/${date?.form_key}/${date?.data_uid}?type=edit`
		)
		if (sourceType.External === date?.['source_type']) {
			openUrl = date?.['page_link']
		}
		window.location.href = openUrl
	}
}
</script>

<style lang="less" scoped>
.card {
	margin: 0 auto;
	background: #fff;
	width: 100%;
	border-radius: 8px;
	padding: 16px 16px 12px 16px;
	margin-bottom: 8px;
	.card-top {
		position: relative;
		border-bottom: 0.5px dashed #e8eaed;
		padding-bottom: 8px;
		.UATit {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			& > div:nth-child(1) {
				font-family: PingFang SC;
				font-size: 15px;
				font-weight: 500;
				line-height: 15px;
				color: #1f2329;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: calc(100vw - 130px);
			}
			& > div:nth-child(2) {
				font-family: PingFang SC;
				font-size: 12px;
				font-weight: 400;
				line-height: 20px;
				color: #2b2f36;
				margin-top: 6px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: calc(100vw - 50px);
			}
			& > div:nth-child(3) {
				font-family: PingFang SC;
				font-size: 10px;
				font-weight: 400;
				line-height: 16px;
				color: #8f959e;
				background: #f5f6f7;
				height: 16px;
				margin-top: 4px;
				border-radius: 2px;
				padding: 0px 4px 0px 4px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: calc(100vw - 130px);
			}
		}
		.UA {
			height: 20px;
			padding: 1px 4px;
			background: #fef0dc;
			border-radius: 2px;
			font-family: PingFang SC;
			font-size: 12px;
			font-weight: 500;
			line-height: 18px;
			color: #ff9801;
			text-align: center;
			position: absolute;
			top: 0;
			right: 16px;
		}
	}
	.card-bottom {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		.time {
			color: #8f959e;
			font-family: PingFang SC;
			font-size: 12px;
			font-weight: 400;
		}
		.ok-person-group-div {
			max-width: 60%;
		}
	}
}
</style>
